<template>
    <!-- 面包屑-->
    <el-breadcrumb separator-icon="ArrowRight" style="margin-bottom: 50px;">
        <el-breadcrumb-item>项目管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/home/projectList' }">项目列表</el-breadcrumb-item>
        <el-breadcrumb-item>代码质量评估</el-breadcrumb-item>
        <el-breadcrumb-item>整体信息</el-breadcrumb-item>
    </el-breadcrumb>
    <!--<el-button class="button" @click="indicatorButton">项目指标信息计算标准</el-button>
    <el-drawer v-model="drawer" title="函数相关信息" :with-header="false"></el-drawer>
    -->
    <div style="display: flex;justify-content: space-between;">
        <!--整体信息卡片-->
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>项目基本信息</span>
                </div>
            </template>

            <div class="item">
                <div style="color:rgb(0, 139, 93);padding: 0 20px;">文件个数: </div>{{
                    projectWholeInfoData.projectInfoData.filenum }}
            </div>
            <div class="item">
                <div style="color:rgb(0, 139, 93);padding: 0 20px;">方法个数: </div>{{
                    projectWholeInfoData.projectInfoData.functionnum }}
            </div>
            <div class="item">
                <div style="color:rgb(0, 139, 93);padding: 0 20px;">接口个数: </div>{{
                    projectWholeInfoData.projectInfoData.apinum }}
            </div>
            <div class="item">
                <div style="color:rgb(0, 139, 93);padding: 0 20px;">注释行数: </div>{{
                    projectWholeInfoData.projectInfoData.commentline }}
            </div>
            <div class="item">
                <div style="color:rgb(0, 139, 93);padding: 0 20px;">有效代码行数: </div>
                {{ projectWholeInfoData.projectInfoData.executablecodeline }}
            </div>

        </el-card>
        <!--项目指标信息-->
        <div id="myChart123" style=" display:block;padding-right:5px;width: 620px;height:400px;"></div>
    </div>
    <el-divider />
    <!--单个文件基本信息-->
    <div class="view-select">
        <span style="font-size: 15px;float:left;">选择文件：</span>
        <el-select v-model="projectWholeInfoData.getSelectedList" size="large" placeholder="请选择文件"
            style="width:400px;float:left;margin-left: 10px;">
            <el-option v-for="item in projectWholeInfoData.projectstructureData" :key="item.fileid" :label="item.filename"
                :value="item.fileid" @click="handlerItemClick(item)">
                <span style="float: left">{{ item.filename }}</span>
                <span style="
          float: right;
          color: var(--el-text-color-secondary);
          font-size: 13px;">{{ item.fileaddress }}</span>
            </el-option>
        </el-select>
    </div>

    <div class="file-card">
        <el-card style="width:500px;">
            <template #header>
                <div class="card-header">
                    <span>文件基本信息</span>
                </div>
            </template>
            <el-row :gutter="20">
                <el-col :span="10" class="item">文件名: {{ file.filename }}</el-col>
                <el-col :span="10" class="item">文件大小: {{ projectSingleInfoData.data.size }}</el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="10" class="item">出度: {{ projectSingleInfoData.data.outdegree }}</el-col>
                <el-col :span="10" class="item">入度: {{ projectSingleInfoData.data.indegree }}</el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="10" class="item">有效代码行: {{ projectSingleInfoData.data.executablecodeline }}</el-col>
                <el-col :span="10" class="item">注释行: {{ projectSingleInfoData.data.commentline }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="10" class="item">全局变量数: {{ projectSingleInfoData.data.globalvariablenum }}</el-col>
                <el-col :span="11" class="item">更新时间: {{ projectSingleInfoData.data.lastupdate }}</el-col>
            </el-row>

        </el-card>
    </div>
</template>

<script>
import { useRouter, useRoute } from "vue-router";
import { reactive, computed, ref, onMounted, getCurrentInstance } from "vue";
import { getProjectWholeInfo, getProjectSingleInfo } from "../../api/http.js"
import * as echarts from 'echarts';
export default {
    name: "ProjectWholeInfo",
    setup() {
        const getProjectid = localStorage.getItem("projectid")
        console.log(getProjectid)
        const wholedata = reactive({
            projectid: getProjectid,
        })
        const singledata = reactive({
            projectid: getProjectid,
            fileid: "",
        })
        const projectWholeInfoData = reactive({
            projectInfoData: { //项目基本信息
                apinum: "",
                commentline: "",
                executablecodeline: "",
                filenum: "",
                functionnum: "",
                piid: "",
                projectid: "",
            },
            indicatorInfoData: { //项目指标信息
                comprehensibility: "",
                easetesting: "",
                fungibility: "",
                modifiability: "",
                scalability: "",
            },
            indicatorName: ["易理解性", "易测试性", "可替换性", "可修改性", "可拓展性",],
            //indicatorData:[],
            projectstructureData: [], //项目文件结构
            getSelectedList: [],
        })
        const projectSingleInfoData = reactive({
            data: {
                fileinfoid: "",
                fileid: "",
                indegree: "",
                outdegree: "",
                size: "",
                lastupdate: "",
                globalvariablenum: "",
                executablecodeline: "",
                commentline: "",
            }
        })
        console.log(projectSingleInfoData)
        //console.log(projectWholeInfoData.indicatorName)
        const indicatorData = ref([]);
        /** 获取项目整体信息 */
        const getProjectWholeInfoData = () => {
            getProjectWholeInfo(wholedata).then(response => {
                //console.log(response)
                const resData = response.data.data
                projectWholeInfoData.projectInfoData = resData.projectinfo //项目基本信息
                projectWholeInfoData.indicatorInfoData = resData.indicatorinfo //项目指标信息
                projectWholeInfoData.projectstructureData = resData.projectstructure //项目文件结构
                localStorage.setItem("projectstructureData", JSON.stringify(resData.projectstructure));
                console.log("set",resData.projectstructure)
                indicatorData.value = []
                indicatorData.value.push(projectWholeInfoData.indicatorInfoData.comprehensibility)
                indicatorData.value.push(projectWholeInfoData.indicatorInfoData.easetesting)
                indicatorData.value.push(projectWholeInfoData.indicatorInfoData.fungibility)
                indicatorData.value.push(projectWholeInfoData.indicatorInfoData.modifiability)
                indicatorData.value.push(projectWholeInfoData.indicatorInfoData.scalability)
                //console.log(indicatorData.value)
                // for (let i in projectWholeInfoData.indicatorInfoData) {
                //     indicatorData.push(projectWholeInfoData.indicatorInfoData[i])
                // }
                // let myChart = proxy.$echarts.init(document.getElementById("myChart123"));
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('myChart123'), 'dark', {
                    width: 620,
                    height: 400
                });
                // 绘制图表
                myChart.setOption({
                    title: {
                        text: '项目指标评价',
                        left: 'center',
                    },
                    tooltip: {},
                    xAxis: {
                        name: '指标名称',
                        //data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                        data: projectWholeInfoData.indicatorName,
                    },
                    yAxis: {
                        type: 'value',
                        name: '度量值',
                        position: 'left',
                    },
                    series: [
                        {

                            type: 'bar',
                            //data: [5, 20, 36, 10, 10, 20]
                            data: indicatorData.value,
                        }
                    ]
                });
            }).catch(error => {
                console.log(error);
            })
        }
        const file = reactive({
            filename: "",
        })
        /** 选择单个文件后在下面的卡片上展示其信息 */
        const handlerItemClick = (item) => {
            console.log('item =>', item.fileid)
            singledata.fileid = item.fileid
            file.filename = item.filename
            getProjectSingleInfoData()

        }
        const getProjectSingleInfoData = () => {
            getProjectSingleInfo(singledata).then(response => {
                console.log(response)
                const resData = response.data.data
                projectSingleInfoData.data = resData
                console.log(projectSingleInfoData.data)
            }).catch(error => {
                console.log(error);
            })
        }
        onMounted(() => {
            getProjectWholeInfoData()
        })

        return {
            wholedata,
            singledata,
            projectWholeInfoData,
            projectSingleInfoData,
            indicatorData,
            handlerItemClick,
            file,
        }
    }

}
</script>

<style scoped>
.file-card {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 10px;
}

.view-select {
    width: 700px;
    height: 60px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
}

.item {
    display: flex;
    font-size: 15px;
    margin-bottom: 18px;
}

.box-card {
    display: block;
    width: 360px;
    height: 300px;
    margin: 10px;
}
</style>
